:root {
  // --ngm-copilot-font-family: Söhne,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Helvetica Neue,Arial,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
  --ngm-primary-container-rounded: theme('borderRadius.3xl');
}

:root .default, :root .light, :root .dark {
  --mat-expansion-container-background-color: var(--ngm-color-surface-container-low);
}

:root .default, :root .light {
  --ngm-app-background-color: white;
  --ngm-color-main-container-background: white;
  --ngm-color-on-surface: #1f1f1f;
  --ngm-color-on-surface-variant: #444746;
  --ngm-color-surface: white;
  --ngm-color-surface-container-low: theme('colors.neutral.50');
  --ngm-color-surface-container: theme('colors.neutral.100');
  --ngm-color-surface-container-high: #f2f2f2;
  --ngm-color-surface-container-highest: #e5e5e5;
  --ngm-color-outline-variant: theme('colors.neutral.100');
  --ngm-copilot-bg-color: var(--ngm-color-surface-container);
  --main-surface-primary: var(--ngm-color-surface);
  --main-surface-secondary: theme('colors.neutral.100');
  --border-medium: theme('colors.neutral.300');
  --border-light: theme('colors.neutral.200');
  --components-card-option-selected-border: theme('colors.blue.500');
  --color-components-panel-bg: #fff;
  --color-components-panel-bg-blur: hsla(0, 0%, 100%, 0.9);
  --color-components-panel-border: #10182814;
  --color-components-card-bg: white;
  --color-components-button-primary-text: white;
  --color-components-button-primary-border: theme('colors.blue.600');
  --color-components-button-primary-bg: theme('colors.blue.600');
  --color-components-button-secondary-border: theme('colors.neutral.300');
  --color-components-button-secondary-border-hover: #10182833;
  --color-components-button-secondary-bg: theme('colors.white');
  --color-components-button-secondary-bg-hover: #f9fafb;
  --color-components-input-bg: theme('colors.gray.100');
  --color-components-input-bg-normal: theme('colors.gray.100');
  --color-components-input-bg-hover: theme('colors.gray.50');
  --color-components-input-bg-active: theme('colors.gray.50');
  --color-components-input-border-hover: theme('colors.gray.200');
  --color-components-input-border-active: theme('colors.gray.200');
  --color-components-input-text-placeholder: var(--color-text-secondary);
  --color-components-list-option-bg: theme('colors.gray.50');
  --color-components-list-option-active-bg: theme('colors.gray.100');
  --color-components-toggle-bg: theme('colors.primary.500');
  --color-components-toggle-bg-unchecked: theme('colors.neutral.300');
  --color-components-toggle-knob: theme('colors.gray.50');
  // Divider
  --ngm-divider-color-secondary: theme('colors.neutral.100');
  --color-divider-regular: theme('colors.neutral.100');
  --color-divider-deep: theme('colors.neutral.200');
  --color-divider-subtle: theme('colors.neutral.100');
  // Text
  --color-base-content: #1f1f1f;
  --color-text-primary: var(--color-base-content);
  --text-secondary: theme('colors.neutral.500');
  --color-text-success: theme('colors.green.500');
  --color-text-secondary: theme('colors.zinc.400');
  --color-text-tertiary: theme('colors.gray.400');
  --color-text-quaternary: theme('colors.gray.300');
  --color-text-warning: theme('colors.orange.400');
  --color-text-destructive: theme('colors.red.500');
  --color-text-accent: theme('colors.amber.500');
  --color-text-accent-secondary: theme('colors.amber.400');

  --color-hover-bg: oklch(0 0 0 / 0.05);
  --color-danger-bg: theme('colors.red.50');
  --color-state-destructive-hover: theme('colors.red.50');
  --color-state-destructive-hover: theme('colors.red.50');
}

:root .dark {
  --ngm-app-background-color: #1e1f20;
  --ngm-color-main-container-background: #1e1f20;
  --ngm-color-on-surface: #e3e3e3;
  --ngm-color-on-surface-variant: #444746;
  --ngm-color-surface: #16181c;
  --ngm-color-surface-container-low: #62626210;
  --ngm-color-surface-container: black;
  --ngm-color-surface-container-high: #24292f;
  --ngm-color-surface-container-highest: #2f353c;
  --ngm-color-outline-variant: theme('colors.neutral.800');
  --ngm-copilot-bg-color: var(--ngm-color-surface-container);
  --main-surface-primary: var(--ngm-color-surface);
  --main-surface-secondary: theme('colors.neutral.800');
  --border-medium: theme('colors.neutral.600');
  --border-light: theme('colors.neutral.700');
  --components-card-option-selected-border: theme('colors.blue.500');
  --color-components-panel-bg: #222225;
  --color-components-panel-border: theme('colors.neutral.600');
  --color-components-card-bg: #16181c;
  --color-components-button-primary-text: white;
  --color-components-button-primary-border: theme('colors.blue.500');
  --color-components-button-primary-bg: theme('colors.blue.500');
  --color-components-button-secondary-border: theme('colors.neutral.600');
  --color-components-button-secondary-border-hover: #10182833;
  --color-components-button-secondary-bg: theme('colors.neutral.700');
  --color-components-button-secondary-bg-hover: #f9fafb;
  --color-components-input-bg: theme('colors.neutral.800');
  --color-components-input-bg-normal: theme('colors.neutral.800');
  --color-components-input-bg-hover: theme('colors.neutral.700');
  --color-components-input-bg-active: theme('colors.neutral.700');
  --color-components-input-border-hover: theme('colors.neutral.600');
  --color-components-input-border-active: theme('colors.neutral.600');
  --color-components-input-text-placeholder: var(--color-text-secondary);
  --color-components-list-option-bg: theme('colors.neutral.800');
  --color-components-list-option-active-bg: theme('colors.neutral.700');
  // Divider
  --ngm-divider-color-secondary: theme('colors.neutral.900');
  --color-divider-regular: theme('colors.neutral.900');
  --color-divider-deep: theme('colors.neutral.950');
  --color-divider-subtle: theme('colors.neutral.900');
  // Text
  --color-base-content: #e3e3e3;
  --color-text-primary: var(--color-base-content);
  --text-secondary: theme('colors.zinc.400');
  --color-text-success: theme('colors.green.500');
  --color-text-secondary: theme('colors.zinc.500');
  --color-text-tertiary: theme('colors.neutral.600');
  --color-text-quaternary: theme('colors.neutral.700');
  --color-text-warning: theme('colors.red.300');

  --color-hover-bg: oklch(1 0 0 / 0.1);
  --color-danger-bg: #991b1b52;
  --color-danger-content: #ffd4d4;
}
